<template>
  <div>
    <div class="container">
      <div class="select">
        <div class="top">
          <div class="title">库区选择</div>
          <el-select v-model="select" @change="handleChange">
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="content">
          <el-input @input="handleInput" v-model="searchArea" suffix-icon="el-icon-search" placeholder="请输入库区的名称"></el-input>
          <div class="details">
            <div class="list">
              <el-scrollbar v-if="buttonList.length">
                <el-button @click="clickArea(item.id, index)" :class="{ isActive: isActive[index] }" v-for="(item, index) in buttonList" :key="item.id">{{ item.name }}</el-button>
              </el-scrollbar>
              <div v-else class="noArea">
                <div class="display">暂无库区</div>
                <el-button round type="success">新增库区</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="division"></div>
      <div class="right">
        <div class="top">
          <div class="title">库区总览</div>
          <div class="overView">
            <div class="item1">
              <div class="label">库存总计:</div>
              <span class="num">{{ overView.total }}</span>
            </div>
            <div class="item1">
              <div class="square"></div>
              <div class="label">停用库位:</div>
              <span class="num">{{ overView.stop }}</span>
            </div>
            <div class="item1">
              <div class="square" style="background-color: rgb(0, 190, 118);"></div>
              <div class="label">占用库位:</div>
              <span class="num">{{ overView.use }}</span>
            </div>
            <div class="item1">
              <div class="square" style="background-color: rgb(178, 220, 204);"></div>
              <div class="label">空闲库位:</div>
              <span class="num">{{ overView.free }}</span>
            </div>
          </div>
        </div>
        <div class="content" v-if="positionList.length && buttonList.length">
          <el-tooltip :class="{ active: item.useStatus === 1 ? true : false, deactive: item.status === 1 ? false : true }" v-for="item in positionList" :key="item.id" placement="bottom" popper-class="testtooltip" :visible-arrow="false" :open-delay="400" class="item" effect="light" content="Top Left 提示文字">
            <div slot="content" class="inner">
              <div>
                <span class="label">库位编号：</span>
                <span class="value">{{ item.code }}</span>
              </div>
              <div>
                <span class="label">库位名称：</span>
                <span class="value">{{ item.name }}</span>
              </div>
              <div>
                <span class="label">库位位置：</span>
                <span class="value">{{ item.locationRow }}排-{{ item.locationColumn }}列-{{ item.locationLayer }}层</span>
              </div>
              <div>
                <span class="label">库位状态：</span>
                <span class="value">{{ item.useStatus === 0 ? '空闲' : '未满' }}</span>
              </div>
              <div>
                <span class="label">货品名称：</span>
                <span class="value">{{ item.goodsName }}</span>
              </div>
              <div>
                <span class="label">货品数量：</span>
                <span class="value">{{ item.goodsTotal }}</span>
              </div>
            </div>
            <el-button></el-button>
          </el-tooltip>
        </div>
        <el-empty style="margin-top:100px" v-else description="暂无库位" image="http://www-wms-java.itheima.net/img/empty.4300e933.png">
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { queryAllposition, queryAllWarehouse } from '@/api/warehouse'
import { queryAllArea, queryOverview } from '@/api/areamanage'
export default {
  data () {
    return {
      active: false, // 占用
      deactive: false, // 停用
      isActive: [], // 空闲
      selectList: [],
      select: '',
      buttonList: [],
      button: '',
      overView: {},
      searchArea: '',
      positionList: []
    }
  },
  async created () {
    // 下拉列表
    const { data: data1 } = await queryAllWarehouse({
      status: 1
    })
    console.log(data1)
    this.selectList = data1
    this.select = this.selectList[0].id
    // 按钮选择
    const { data: data2 } = await queryAllArea({
      status: 1,
      warehouseId: this.select
    })
    console.log(data2)
    this.buttonList = data2
    this.buttonList.forEach(item => {
      this.isActive.push(false)
    })
    this.isActive[0] = true
    this.button = this.buttonList[0].id
    // 右侧库区总览
    const { data: data3 } = await queryOverview(this.button)
    console.log(data3)
    this.overView = data3
    // 库位信息
    const { data: data4 } = await queryAllposition({
      areaId: this.button
    })
    console.log(data4)
    this.positionList = data4
  },
  methods: {
    // 点击库区按钮
    async clickArea (id, index) {
      this.isActive = this.isActive.map(item => false)
      this.isActive[index] = true
      console.log(id)
      // 右侧库区总览
      const { data: data3 } = await queryOverview(id)
      console.log(data3)
      this.overView = data3
      // 库位信息
      const { data: data4 } = await queryAllposition({
        areaId: id
      })
      console.log(data4)
      this.positionList = data4
    },
    // 下拉列表改变时触发
    async handleChange (val) {
      console.log(val)
      // 按钮选择
      const { data: data2 } = await queryAllArea({
        status: 1,
        warehouseId: val
      })
      console.log(data2)
      this.buttonList = data2
      if (data2.length) {
        this.button = this.buttonList[0].id
        this.buttonList.forEach(item => {
          this.isActive.push(false)
        })
        this.isActive[0] = true
        // 右侧库区总览
        const { data: data3 } = await queryOverview(this.button)
        console.log(data3)
        this.overView = data3
        // 库位信息
        const { data: data4 } = await queryAllposition({
          areaId: this.button
        })
        console.log(data4)
        this.positionList = data4
      }
    },
    // 通过库区名称搜索
    async handleInput () {
      if (this.searchArea) {
        const { data } = await queryAllArea({
          status: 1,
          warehouseId: this.select,
          like_name: this.searchArea
        })
        this.buttonList = data
        this.button = this.buttonList[0].id
        this.buttonList.forEach(item => {
          this.isActive.push(false)
        })
        this.isActive[0] = true
      } else {
        const { data: data2 } = await queryAllArea({
          status: 1,
          warehouseId: this.select
        })
        console.log(data2)
        this.buttonList = data2
        this.button = this.buttonList[0].id
        this.buttonList.forEach(item => {
          this.isActive.push(false)
        })
        this.isActive[0] = true
      }
      // 库位信息
      const { data: data4 } = await queryAllposition({
        areaId: this.button
      })
      console.log(data4)
      this.positionList = data4
    }
  }
}
</script>

<style lang="scss">
.testtooltip {
  background: white !important;
  box-shadow: 1px 1px 10px 3px #D3D3D6;
  padding: 20px 25px;
  &.is-light {
    border: none;
  }
  .inner {
    div {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 5px;
      }
      .label {
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        line-height: 17px;
        margin-right: 15px;
        color: #b5abab;
      }
      .value {
        color: #332929;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  height: calc(100vh - 114px);
  .select {
    width: 263px;
    padding: 27px 19px 27px 20px;
    float: left;
    .el-select::v-deep {
      .el-input {
        .el-input__inner {
          &::placeholder {
            color: #1f2d3d;
          }
          height: 40px;
          line-height: 40px;
          border: 1px solid #f8f5f5;
          background: #f8f5f5;
          border-radius: 6px;
        }
      }
    }
    .top {
      margin-bottom: 21px;
      .title {
        width: 64px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #332929;
        line-height: 22px;
        margin-bottom: 22px;
        margin-left: 10px;
      }
    }
    .content {
      width: 224px;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      border-radius: 6px;
      padding: 30px 29px 0 26px;
      .el-input {
        margin-bottom: 10px;
        ::v-deep .el-input__inner {
          &::placeholder {
            color: #b5abab;
          }
          height: 40px;
          line-height: 40px;
          border: 1px solid #f8f5f5;
          background: #f8f5f5;
          border-radius: 6px;
        }
      }
      .details {
        height: calc(100vh - 360px);
        position: relative;
        .list {
          height: 100%;
          .el-scrollbar {
            height: 100%;
            overflow: hidden;
            position: relative;
            ::v-deep .el-scrollbar__wrap {
              overflow-x: hidden!important;
              padding-right: 20px;
              overflow: scroll;
              height: 100%;
            }
            ::v-deep .is-horizontal {
              display: none;
            }
            .el-button {
              width: 140px;
              height: 40px;
              background: #fff;
              border-radius: 4px;
              box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
              margin: 0 auto;
              margin-top: 20px;
              font-size: 13px;
              font-family: PingFangSC,PingFangSC-Medium;
              font-weight: 500;
              text-align: center;
              color: #ffb200;
              // line-height: 40px;
              cursor: pointer;
              border: none;
              margin-left: 5px;
              &.isActive {
                background: #ffb200;
                color: #fff;
              }
            }
          }
          .noArea {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .display {
              width: 56px;
              height: 20px;
              font-size: 14px;
              font-family: PingFangSC,PingFangSC-Semibold;
              font-weight: 600;
              text-align: left;
              color: #b5abab;
              line-height: 20px;
              margin: 0 auto;
              margin-bottom: 19px;
            }
          }
        }
      }
    }
  }
  .division {
    width: 10px;
    height: 100%;
    background: linear-gradient(270deg,hsla(0,0%,100%,0),rgba(99,97,96,.1));
  }
  .right {
    padding: 27px 19px 27px 20px;
    float: left;
    height: 100%;
    width: calc(100% - 273px);
    .top {
      margin-bottom: 21px;
      height: 22px;
      display: flex;
      .title {
        width: 64px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #332929;
        line-height: 22px;
        margin-right: 103px;
      }
      .overView {
        display: flex;
        .item1 {
          display: flex;
          margin-right: 43px;
          .square {
            background-color: rgb(195, 195, 195);
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-top: 5px;
            margin-right: 7px;
          }
          .label {
            margin-right: 4px;
            width: 70px;
            font-size: 14px;
            font-family: PingFangSC,PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #424250;
          }
          .num {
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 43px);
      overflow-y: auto;
      display: flex;
      .el-tooltip {
        width: 36px;
        height: 36px;
        border-radius: 7px;
        border: none;
        background-color: #b2dccc!important;
        display: inline-block;
        margin-bottom: 10px;
        margin-right: 2px;
        padding: 0;
        &:hover {
          border: 2px solid #00be76;
        }
        &.active {
          background-color: rgb(0, 190, 118)!important;
        }
        &.deactive {
          background-color: rgb(195, 195, 195)!important;
        }
      }
    }
  }
}
</style>
